<template>
  <div class="out">
    <el-row class="tac">
      <el-col :span="12" class="el1">
        <el-menu
          :default-active="path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgba(250,250,250,0)"
        >
          <el-menu-item index="/persen" @click="goto('/persen')">
            <i class="el-icon-user"></i>
            <span class="span" slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="/join" @click="goto('/join')">
            <i class="el-icon-edit-outline"></i>
            <span class="span" slot="title">我参与的</span>
          </el-menu-item>
          <el-menu-item index="/public" @click="goto('/public')">
            <i class="el-icon-document"></i>
            <span class="span" slot="title">我发布的</span>
          </el-menu-item>
          <el-menu-item index="/medal" @click="goto('/medal')">
            <i class="el-icon-goods"></i>
            <span class="span" slot="title">我的订单</span>
          </el-menu-item>
          <!-- <el-menu-item index="/msg" @click="goto('/msg')">
            <i class="el-icon-bell"></i>
            <el-badge :value="value" class="msg">
              <el-button class="btn">通知</el-button>
            </el-badge>
          </el-menu-item> -->
        </el-menu>
      </el-col>
      <router-view class="router"></router-view>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "new",
      path: ""
    };
  },
  created() {
    this.gopath();
  },
  mounted() {},
  methods: {
    gopath() {
      // console.log("地址");
      let dr = window.location.href.split("/");
      this.path = "/" + dr[4];
      // console.log(this.path);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goto(path) {
      this.$router.push("/profile" + path);
      if (path == "/msg") {
        this.value = "";
      }
    }
  }
};
</script>

<style>
.out {
  /* margin-top: -20px; */
  /* font-family: "楷体"; */
  font-weight: bold;
}
.el1 {
  position: fixed;
  margin-top: 20px;
  width: 150px;
  margin-left: 30px;
  background-color: rgba(250, 250, 250, 0.5);
}
.router {
  margin-top: 10px;
}
.span {
  display: inline-block;
  font-size: 2.2vh;
}
.msg {
  padding: 0;
  height: 5vh;
}
.msg .btn {
  width: 8vh;
  height: 6vh;
  background-color: transparent;
  border: 0;
  padding: 0;
  font-size: 2.2vh;
  font-weight: bold;
  color: black;
  margin-top: -2vh;
}
.msg .btn:focus {
  color: #62abf9;
}
</style>
